<template>
  <div>
    <div class="hycss">
      <h1 class="title">店铺激活页面</h1>
      <el-button type="success" @click="activate">点击我激活</el-button>
      <span>还有&nbsp;{{countDown}}&nbsp;秒关闭当前页面</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.shopId,
      countDown: null, // 页面上显示的倒计时数字
      timerThree:"" , // 倒计时的对象
    }
  },
  methods: {
    // 倒计时
    countDownFunc() {
      const TIME_COUNT = 5;  // 3s的倒计时变量
      if (!this.timerThree) { // 没有倒计时在执行
        this.countDown = TIME_COUNT;
        this.timerThree = setInterval(() => {
          if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
            this.countDown--;
          } else {
            clearInterval(this.timerThree); // 停止循环执行
            this.timerThree = null;  // 倒计时对象置为null
            // 要执行的代码，例如页面跳转等
            window.opener = null;
            window.open("about:blank", "_top").close()
          }
        }, 1000)// 1s执行一次
      }
    },
      activate() {
      this.$http.post("/shop/audit/activateShop/"+this.id)
          .then(result => {
            result = result.data;
            console.log(this.$route)
            if (result.success) {
              this.$message({
                message: "激活成功!",
                type: 'success'
              });
              this.countDownFunc();
            } else {
              this.$message({
                message: result.message,
                type: 'error'
              });
              this.countDownFunc();
            }
          })
    },
    mounted() {
      this.activate();
      this.countDownFunc();
    }
  }
}
</script>

<style scoped>
.hycss{
  width: 250px;
  height: 100px;
  position: absolute;
  border-radius: 30px;
  left: 50%;
  top: 30%;
  margin: -200px 0 0 -150px;
  text-align: center;
}


</style>